<template>
  <CommonPage title="就诊卡管理">
    <template #action>
      <div>
        <n-button type="primary" secondary @click="$table?.handleExport()">
          <TheIcon icon="mdi:download" :size="18" class="mr-5" />
          导出
        </n-button>
        <n-button type="primary" class="ml-16" @click="handleAdd">
          <TheIcon icon="material-symbols:add" :size="18" class="mr-5" />
          新建就诊卡
        </n-button>
      </div>
    </template>

    <CrudTable
      ref="$table"
      v-model:query-items="queryItems"
      :extra-params="extraParams"
      :scroll-x="1200"
      :columns="columns"
      :get-data="api.getCards"
      :query-bar="false"
      @on-checked="onChecked"
      @on-data-change="(data) => (tableData = data)"
    >
      <template #queryBar>
        <QueryBarItem label="姓名" :label-width="65">
          <n-input
            v-model:value="queryItems.query"
            type="text"
            placeholder="请输入姓名"
            @keypress.enter="$table?.handleSearch"
          />
        </QueryBarItem>
      </template>
    </CrudTable>
    <!-- 新增/编辑/查看 -->
    <CrudModal
      v-model:visible="modalVisible"
      :title="modalTitle"
      :loading="modalLoading"
      :show-footer="modalAction !== 'view'"
      @on-save="handleSave"
    >
      <n-form
        ref="modalFormRef"
        label-placement="left"
        label-align="left"
        :label-width="80"
        :model="modalForm"
        :disabled="modalAction === 'view'"
      >
        <n-form-item
          label="姓名"
          path="name"
          :rule="{
            required: true,
            message: '请输入姓名',
            trigger: ['input', 'blur'],
          }"
        >
          <n-input v-model:value="modalForm.name" disabled placeholder="请输入姓名" />
        </n-form-item>
        <n-form-item
          label="证件类型"
          path="id_type"
          :rule="{
            required: true,
            message: '请输入姓名',
            trigger: ['input', 'blur'],
          }"
        >
          <n-input v-model:value="modalForm.id_type" disabled placeholder="请输入姓名" />
        </n-form-item>
        <n-form-item
          label="证件号码"
          path="id_number"
          :rule="{
            required: true,
            message: '请输入证件号码',
            trigger: ['input', 'blur'],
          }"
        >
          <n-input v-model:value="modalForm.id_number" disabled placeholder="请输入证件号码" />
        </n-form-item>
        <n-form-item
          label="民族"
          path="nation"
          :rule="{
            required: true,
            message: '请选择民族',
            trigger: ['input', 'blur'],
          }"
        >
          <n-select v-model:value="modalForm.nation" :options="options"></n-select>
        </n-form-item>

        <n-form-item
          label="电话号码"
          path="phone"
          :rule="{
            required: true,
            message: '请输入电话号码',
            trigger: ['input', 'blur'],
          }"
        >
          <n-input v-model:value="modalForm.phone" placeholder="请输入电话号码" />
        </n-form-item>
        <n-form-item
          label="地址"
          path="address"
          :rule="{
            required: true,
            message: '请输入地址',
            trigger: ['input', 'blur'],
          }"
        >
          <n-input v-model:value="modalForm.address" placeholder="请输入地址" />
        </n-form-item>
      </n-form>
    </CrudModal>
  </CommonPage>
</template>

<script setup>
import { NButton, NSwitch } from 'naive-ui'
import { formatDateTime, renderIcon, isNullOrUndef } from '@/utils'
import { useCRUD } from '@/composables'
import api from './api'

defineOptions({ name: 'Card' })

const $table = ref(null)
/** 表格数据，触发搜索的时候会更新这个值 */
const tableData = ref([])

/** 补充参数（可选） */
const extraParams = ref({})
const options = ref([
  {
    label: '汉族',
    value: '汉族',
  },
  {
    label: '壮族',
    value: '壮族',
  },
  {
    label: '满族',
    value: '满族',
  },
  {
    label: '回族',
    value: '回族',
  },
  {
    label: '苗族',
    value: '苗族',
  },
  {
    label: '维吾尔族',
    value: '维吾尔族',
  },
  {
    label: '土家族',
    value: '土家族',
  },
  {
    label: '彝族',
    value: '彝族',
  },
  {
    label: '蒙古族',
    value: '蒙古族',
  },
  {
    label: '藏族',
    value: '藏族',
  },
  {
    label: '布依族',
    value: '布依族',
  },
  {
    label: '侗族',
    value: '侗族',
  },
  {
    label: '瑶族',
    value: '瑶族',
  },
  {
    label: '朝鲜族',
    value: '朝鲜族',
  },
  {
    label: '白族',
    value: '白族',
  },
  {
    label: '哈尼族',
    value: '哈尼族',
  },
  {
    label: '哈萨克族',
    value: '哈萨克族',
  },
  {
    label: '黎族',
    value: '黎族',
  },
  {
    label: '傣族',
    value: '傣族',
  },
  {
    label: '畲族',
    value: '畲族',
  },
  {
    label: '傈僳族',
    value: '傈僳族',
  },
  {
    label: '仡佬族',
    value: '仡佬族',
  },
  {
    label: '东乡族',
    value: '东乡族',
  },
  {
    label: '高山族',
    value: '高山族',
  },
  {
    label: '拉祜族',
    value: '拉祜族',
  },
  {
    label: '水族',
    value: '水族',
  },
  {
    label: '佤族',
    value: '佤族',
  },
  {
    label: '纳西族',
    value: '纳西族',
  },
  {
    label: '羌族',
    value: '羌族',
  },
  {
    label: '土族',
    value: '土族',
  },
  {
    label: '仫佬族',
    value: '仫佬族',
  },
  {
    label: '锡伯族',
    value: '锡伯族',
  },
  {
    label: '柯尔克孜族',
    value: '柯尔克孜族',
  },
  {
    label: '达斡尔族',
    value: '达斡尔族',
  },
  {
    label: '景颇族',
    value: '景颇族',
  },
  {
    label: '毛南族',
    value: '毛南族',
  },
  {
    label: '撒拉族',
    value: '撒拉族',
  },
  {
    label: '布朗族',
    value: '布朗族',
  },
  {
    label: '塔吉克族',
    value: '塔吉克族',
  },
  {
    label: '阿昌族',
    value: '阿昌族',
  },
  {
    label: '普米族',
    value: '普米族',
  },
  {
    label: '鄂温克族',
    value: '鄂温克族',
  },
  {
    label: '怒族',
    value: '怒族',
  },
  {
    label: '京族',
    value: '京族',
  },
  {
    label: '基诺族',
    value: '基诺族',
  },
  {
    label: '德昂族',
    value: '德昂族',
  },
  {
    label: '保安族',
    value: '保安族',
  },
  {
    label: '俄罗斯族',
    value: '俄罗斯族',
  },
  {
    label: '裕固族',
    value: '裕固族',
  },
  {
    label: '乌孜别克族',
    value: '乌孜别克族',
  },
  {
    label: '门巴族',
    value: '门巴族',
  },
  {
    label: '鄂伦春族',
    value: '鄂伦春族',
  },
  {
    label: '独龙族',
    value: '独龙族',
  },
  {
    label: '塔塔尔族',
    value: '塔塔尔族',
  },
  {
    label: '赫哲族',
    value: '赫哲族',
  },
  {
    label: '珞巴族',
    value: '珞巴族',
  },
])
const props = defineProps({
  userId: {
    type: Number,
    default: 2,
  },
})
/** QueryBar筛选参数（可选） */
const queryItems = ref({
  query: props.userId + '',
})
onActivated(() => {
  $table.value?.handleSearch()
})

onMounted(() => {
  $table.value?.handleSearch()
  queryItems.value.query = props.userId
})

const columns = [
  // { title: 'id', key: 'id', width: 10, ellipsis: { tooltip: true } },
  { title: '姓名', key: 'name', width: 3, ellipsis: { tooltip: true } },
  { title: '证件类型', key: 'id_type', width: 3, ellipsis: { tooltip: true } },
  { title: '证件号码', key: 'id_number', width: 6, ellipsis: { tooltip: true } },
  { title: '民族', key: 'nation', width: 3, ellipsis: { tooltip: true } },
  { title: '电话号码', key: 'phone', width: 4, ellipsis: { tooltip: true } },
  { title: '地址', key: 'address', width: 20, ellipsis: { tooltip: true } },
  {
    title: '操作',
    key: 'actions',
    width: 2,
    align: 'center',
    fixed: 'right',
    hideInExcel: true,
    render(row) {
      return [
        h(
          NButton,
          {
            size: 'small',
            type: 'primary',
            secondary: true,
            onClick: () => handleView(row),
          },
          { default: () => '', icon: renderIcon('majesticons:eye-line', { size: 14 }) }
        ),
        h(
          NButton,
          {
            size: 'small',
            type: 'primary',
            // style: 'margin-left: 15px;',
            onClick: () => handleEdit(row),
          },
          { default: () => '', icon: renderIcon('material-symbols:edit-outline', { size: 14 }) }
        ),

        h(
          NButton,
          {
            size: 'small',
            type: 'error',
            // style: 'margin-left: 15px;',
            onClick: () => handleDelete(row.id),
          },
          {
            default: () => '',
            icon: renderIcon('material-symbols:delete-outline', { size: 14 }),
          }
        ),
      ]
    },
  },
]

// 选中事件
function onChecked(rowKeys) {
  if (rowKeys.length) $message.info(`选中${rowKeys.join(' ')}`)
}

// 发布
function handlePublish(row) {
  if (isNullOrUndef(row.id)) return

  row.publishing = true
  setTimeout(() => {
    row.isPublish = !row.isPublish
    row.publishing = false
    $message?.success(row.isPublish ? '已发布' : '已取消发布')
  }, 1000)
}

const {
  modalVisible,
  modalAction,
  modalTitle,
  modalLoading,
  handleAdd,
  handleDelete,
  handleEdit,
  handleView,
  handleSave,
  modalForm,
  modalFormRef,
} = useCRUD({
  name: '就诊卡',
  initForm: { author: '大脸怪' },
  doCreate: api.addPost,
  doDelete: api.deleteCard,
  doUpdate: api.updateCard,
  refresh: () => $table.value?.handleSearch(),
})
</script>
